<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
    <base href="/oa1/" />
    <title>襄阳蓝芯智能化办公系统 - 收件箱</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
<%--    <link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet">--%>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.7.2/css/all.css" rel="stylesheet">
    <style>
        /* 保持原有表头样式 */
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
        /* 分页区域样式优化 */
        .pagination-area {
            margin: 20px 0;
            text-align: center;
        }
        /* 未读消息样式 */
        .unread {
            font-weight: bold;
            color: #d9534f;
        }
        /* 加载状态样式 */
        .loading {
            color: #666;
            font-style: italic;
            padding: 5px 0;
        }
    </style>
    <script src="static/jquery/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

<!-- 主要内容区 -->
<div class="container" style="margin-top: 20px;">
    <!-- 搜索面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h4 class="panel-title"><i class="fa fa-search"></i> 收件消息搜索</h4>
        </div>
        <div class="panel-body">
            <form action="xx/duanxiaoxi/listMsg" id="seachform" method="post" class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-md-5">
                        <label for="biaoti" class="col-md-4 control-label">消息主题</label>
                        <div class="col-md-8">
                            <input type="text" id="biaoti" name="biaoti" class="form-control"
                                   placeholder="请输入消息主题" value="${param.biaoti}">
                            <input type="hidden" name="page" id="page" value="${pageVo.current}">
                            <input type="hidden" name="pageSize" id="pageSize" value="${pageVo.size}">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <label for="creator" class="col-md-4 control-label">发送人</label>
                        <div class="col-md-8">
                            <input type="hidden" id="creator" name="creator" value="${param.creator}">
                            <div class="input-group">
                                <input type="text" id="empName" name="empName" readonly="readonly"
                                       class="form-control" placeholder="请选择员工" value="${param.empName}">
                                <span class="input-group-btn">
                                    <button class="btn btn-info" type="button" data-toggle="modal" data-target="#selectempModal">
                                        <i class="fa fa-search"></i> 请选择
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="col-md-12">
                            <a type="button" href="xx/duanxiaoxi/toAddMsg" class="btn btn-info">
                                <i class="fa fa-pencil"></i> 发送消息
                            </a>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-5">
                        <label for="startDate" class="col-md-4 control-label">开始时间</label>
                        <div class="col-md-8">
                            <input type="date" id="startDate" name="startDate" class="form-control"
                                   value="${param.startDate}">
                        </div>
                    </div>
                    <div class="col-md-5">
                        <label for="endDate" class="col-md-4 control-label">结束时间</label>
                        <div class="col-md-8">
                            <input type="date" id="endDate" name="endDate" class="form-control"
                                   value="${param.endDate}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="col-md-6">
                            <button type="button" onclick="searchBtn()" class="btn btn-success">
                                <i class="fa fa-search"></i> 搜索
                            </button>
                        </div>
                        <!-- 新增重置按钮 -->
                        <div class="col-md-6">
                            <button type="button" onclick="resetSearch()" class="btn btn-warning">
                                <i class="fa fa-refresh"></i> 重置
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 消息列表 -->
    <div class="panel panel-primary">
        <table class="table table-bordered table-hover">
            <thead>
            <tr class="thead-blue" align="center">
                <td width="40%">消息标题</td>
                <td width="20%">发送人</td>
                <td width="25%">发送时间</td>
                <td width="15%">操作</td>
            </tr>
            </thead>
            <tbody>
            <!-- 动态遍历消息列表 -->
            <c:forEach items="${listXiaoxi.records}" var="xiaoxi">
                <tr align="center">
                    <td>
                        <!-- 遍历消息的所有接收记录，只筛选当前用户的那条 -->
                        <c:forEach items="${xxJieshous}" var="jieshou" varStatus="status">
                                <!-- 未读（N）显示红色火苗，已读（Y）隐藏 -->
                                <c:if test='${jieshou.isread == "N" and jieshou.xiaoxiid eq xiaoxi.oid}'>
                                    <span class="glyphicon glyphicon-fire" style="color: red; margin-right: 5px;"></span>
                                </c:if>
                        </c:forEach>
                        <!-- 消息标题 -->
                            ${xiaoxi.biaoti}
                    </td>
                    <td>${xiaoxi.empVo.empName}</td>
                    <td>${xiaoxi.createDate}</td>
                    <td>
                        <a type="button" href="xx/duanxiaoxi/msgInfo?oid=${xiaoxi.oid}"
                           class="btn btn-info btn-xs">查看详情</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-area">
        <div class="input-group col-md-8 col-md-offset-2">
            <div class="row">
                <div class="btn-group">
                    <!-- 首页 -->
                    <button onclick="gotoPage(1, ${pageVo.size})"
                            class="btn btn-primary ${listXiaoxi.current == 1 ? 'disabled' : ''}" type="button">
                        <i class="fa fa-step-backward"></i> 首页
                    </button>

                    <!-- 上一页 -->
                    <button onclick="gotoPage(${listXiaoxi.current - 1}, ${pageVo.size})"
                            class="btn btn-primary ${listXiaoxi.current == 1 ? 'disabled' : ''}" type="button">
                        <i class="fa fa-chevron-left"></i> 上一页
                    </button>

                    <!-- 页码信息 -->
                    <button class="btn btn-primary disabled" type="button">
                        当前第${listXiaoxi.current}/${listXiaoxi.pages}页
                    </button>

                    <!-- 每页条数选择 -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary dropdown-toggle"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            每页显示${pageVo.size}条 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:gotoPage(1,5)">每页显示5条</a></li>
                            <li><a href="javascript:gotoPage(1,10)">每页显示10条</a></li>
                            <li><a href="javascript:gotoPage(1,15)">每页显示15条</a></li>
                            <li><a href="javascript:gotoPage(1,20)">每页显示20条</a></li>
                        </ul>
                    </div>

                    <!-- 总记录数 -->
                    <button class="btn btn-primary disabled" type="button">
                        共${listXiaoxi.total}条记录
                    </button>

                    <!-- 下一页 -->
                    <button onclick="gotoPage(${listXiaoxi.current + 1}, ${pageVo.size})"
                            class="btn btn-primary ${listXiaoxi.current == listXiaoxi.pages ? 'disabled' : ''}" type="button">
                        下一页 <i class="fa fa-chevron-right"></i>
                    </button>

                    <!-- 尾页 -->
                    <button onclick="gotoPage(${listXiaoxi.pages}, ${pageVo.size})"
                            class="btn btn-primary ${listXiaoxi.current == listXiaoxi.pages ? 'disabled' : ''}" type="button">
                        尾页 <i class="fa fa-step-forward"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="confirmModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                确认删除这条消息吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="subconfirm" class="btn btn-primary">确认删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 选择员工模态框 -->
<div class="modal fade" id="selectempModal" tabindex="-1" role="dialog" aria-labelledby="selectempModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="selectempModalLabel">选择员工</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="dept" class="col-md-4 control-label">所属部门</label>
                        <div class="col-md-5">
                            <select name="dept" class="form-control" id="dept">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="job" class="col-md-4 control-label">所属职位</label>
                        <div class="col-md-5">
                            <select name="job" class="form-control" id="job">
                                <option value="">--请选择--</option>
                            </select>
                            <div id="jobLoading" class="loading" style="display: none;">加载中...</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="emp" class="col-md-4 control-label">员工信息</label>
                        <div class="col-md-5">
                            <select name="emp" class="form-control" id="emp" size="10">
                                <option value="" disabled>------请先选择部门和职位------</option>
                            </select>
                            <div id="empLoading" class="loading" style="display: none;">加载中...</div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="sub" class="btn btn-primary">确认选择</button>
            </div>
        </div>
    </div>
</div>

<!-- 脚本逻辑 -->
<script type="text/javascript">
    // 分页跳转
    function gotoPage(page, pageSize) {
        $("#page").val(page);
        $("#pageSize").val(pageSize);
        $("#seachform").submit();
    }

    // 搜索提交
    function searchBtn() {
        $("#page").val(1); // 搜索时重置到第一页
        $("#seachform").submit();
    }

    // 重置搜索条件
    function resetSearch() {
        // 清空输入框
        $("#biaoti").val("");
        $("#empName").val("");
        $("#creator").val("");
        $("#startDate").val("");
        $("#endDate").val("");

        // 重置分页参数为第一页
        $("#page").val(1);

        // 提交表单（显示全部数据）
        $("#seachform").submit();
    }

    // 页面加载完成后初始化
    $(document).ready(function(){
        // 加载部门列表（一级联动）
        $.getJSON("hr/zz-department/listDeptUseSelect", function(listdept) {
            var deptSelect = $("#dept")[0];
            deptSelect.options.length = 1; // 保留"--请选择--"
            if (listdept && listdept.length > 0) {
                for (var i = 0; i < listdept.length; i++) {
                    var dept = listdept[i];
                    deptSelect.options.add(new Option(dept.deptName, dept.oid));
                }
            } else {
                deptSelect.options.add(new Option("暂无部门数据", ""));
            }
        }).fail(function() {
            alert("部门数据加载失败，请刷新重试");
        });

        // 部门变更时加载职位（二级联动）和员工（三级联动）
        $("#dept").change(function() {
            var deptId = $(this).val();
            // 重置职位和员工选择框
            resetSelect("job", "------请选择职位------");
            resetSelect("emp", "------请先选择职位------");

            if (!deptId) {
                return; // 未选择部门时不加载
            }

            // 显示职位加载状态
            $("#jobLoading").show();
            // 加载职位列表
            $.getJSON("hr/zz-department-job/listDeptJobUseSelect", { deptid: deptId }, function(listjob) {
                $("#jobLoading").hide(); // 隐藏加载状态
                var jobSelect = $("#job")[0];
                jobSelect.options.length = 1; // 保留"--请选择--"

                if (listjob && listjob.length > 0) {
                    for (var i = 0; i < listjob.length; i++) {
                        var job = listjob[i];
                        jobSelect.options.add(new Option(job.jobName, job.jobid));
                    }
                } else {
                    jobSelect.options.add(new Option("该部门暂无职位", ""));
                }
                // 部门变更后自动加载对应员工（基于默认职位）
                loadEmployees();
            }).fail(function() {
                $("#jobLoading").hide();
                alert("职位数据加载失败");
            });
        });

        // 职位变更时加载员工（三级联动）
        $("#job").change(loadEmployees);

        // 加载员工列表的通用方法
        function loadEmployees() {
            var deptId = $("#dept").val();
            var jobId = $("#job").val();
            // 重置员工选择框
            resetSelect("emp", "------加载中...------");
            // 显示员工加载状态
            $("#empLoading").show();

            if (!deptId || !jobId) {
                $("#empLoading").hide();
                resetSelect("emp", "------请先选择部门和职位------");
                return;
            }

            // 加载员工列表
            $.getJSON("hr/emp/listEmpUseSelect", {
                deptid: deptId,
                jobid: jobId
            }, function(emps) {
                $("#empLoading").hide();
                var empSelect = $("#emp")[0];
                empSelect.options.length = 0; // 清空现有选项

                if (emps && emps.length > 0) {
                    for (var i = 0; i < emps.length; i++) {
                        var emp = emps[i];
                        empSelect.options.add(new Option(emp.empName, emp.oid));
                    }
                } else {
                    empSelect.options.add(new Option("该职位暂无员工", ""));
                }
            }).fail(function() {
                $("#empLoading").hide();
                alert("员工数据加载失败");
            });
        }

        // 重置选择框的通用方法
        function resetSelect(selectId, defaultText) {
            var select = $("#" + selectId)[0];
            select.options.length = 0;
            select.options.add(new Option(defaultText, ""));
        }

        // 确认选择员工
        $("#sub").click(function() {
            var empSelect = $("#emp")[0];
            var selectedOption = empSelect.options[empSelect.selectedIndex];
            if (!selectedOption || selectedOption.value === "") {
                alert("请选择有效员工");
                return;
            }
            // 设置选中的员工到搜索框
            $("#creator").val(selectedOption.value);
            $("#empName").val(selectedOption.text);
            $('#selectempModal').modal('hide');
        });

        // 打开员工选择模态框时重置
        $('#selectempModal').on('show.bs.modal', function() {
            resetSelect("dept", "--请选择--");
            resetSelect("job", "--请选择--");
            resetSelect("emp", "------请先选择部门和职位------");
            // 重新加载部门列表（避免缓存旧数据）
            $.getJSON("hr/zz-department/listDeptUseSelect", function(listdept) {
                var deptSelect = $("#dept")[0];
                deptSelect.options.length = 1;
                if (listdept && listdept.length > 0) {
                    for (var i = 0; i < listdept.length; i++) {
                        var dept = listdept[i];
                        deptSelect.options.add(new Option(dept.deptName, dept.oid));
                    }
                } else {
                    deptSelect.options.add(new Option("暂无部门数据", ""));
                }
            });
        });

        // 删除确认（预留逻辑）
        $("#subconfirm").click(function() {
            // 实际删除逻辑需根据业务实现
            $('#confirmModal').modal('hide');
        });
    });

    // AJAX错误处理
    $(document).ajaxError(function(event, xhr) {
        if (xhr.status === 403) { // 无权限
            document.location.href = xhr.getResponseHeader("url");
        } else if (xhr.status !== 200) {
            alert("服务器错误，请稍后重试！");
        }
    });
</script>
</body>
</html>
